<template>
        <view class="uni-container">
			<el-dialog title="添加版本" :visible.sync="dialogFormVisible" width="80%">
			  <el-form :model="form">
				<el-form-item label="版本ID" :label-width="formLabelWidth"  v-if="$hasRole('admin')">
				  <el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="版本名称" :label-width="formLabelWidth">
				  <el-input v-model="form.des" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分成比例" :label-width="formLabelWidth">
				  <el-input v-model="form.rate" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="IP地址" :label-width="formLabelWidth"  v-if="$hasRole('admin')">
				  <el-input v-model="form.post" autocomplete="off"></el-input>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addEdition">确 定</el-button>
			  </div>
			</el-dialog>
        <view class="uni-header" v-if="$hasRole('admin')">
            <view class="uni-group">
				<el-button type="primary" @click="dialogFormVisible = true" round size="mini">添加版本</el-button>
            </view>
        </view>
			<el-table
				highlight-current-row
				:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.post.toLowerCase().includes(search.toLowerCase()) || data.des.toLowerCase().includes(search.toLowerCase()))"
				:default-sort = "{prop: 'timeNum', order: 'descending'}"
				height="660"
				border
				stripe
				@sort-change="handleSort">
				<el-table-column
				  label="版本ID"
				  width="150"
				  fixed = "left"
				  prop="name">
				  <template slot="header" slot-scope="scope">
					<el-input
					  v-model="search"
					  size="mini"
					  placeholder="输入关键字搜索"/>
				  </template>
				</el-table-column>
				<el-table-column
				  label="版本名称"
				  width="150"
				  prop="des">
				</el-table-column>
				<el-table-column
				  label="同步状态"
				  width="150">
				  <template slot-scope="scope">
					<view class="uni-group">
						<div v-if="scope.row.sync == 1" style="color:#00cc33">同步中</div>
						<div  v-else-if="scope.row.sync == 2" style="color:#1989fa">未上线</div>
						<div  v-else-if="scope.row.sync == -1" style="color:#ff0000">同步失败</div>
						<div  v-else style="color:#e6a23c">已暂停</div>
					</view>
				  </template>
				</el-table-column>
				<el-table-column
				  label="内存使用"
				  width="150">
				  <template slot-scope="scope">
					<el-progress type="dashboard" :percentage="scope.row.mem" :color="colors" :width="60"></el-progress>
					<div>{{scope.row.menValue}}</div>
				  </template>
				</el-table-column>
				<el-table-column
				  label="运行时长"
				  width="150"
				  prop="runTime">
				</el-table-column>
				<el-table-column
				  label="IP地址"
				  width="150"
				  prop="post">
				</el-table-column>
				<el-table-column
				  label="分成比例"
				  width="80"
				  prop="rate">
				</el-table-column>
				<el-table-column
				  label="上线时间"
				  width="100"
				  prop="time">
				</el-table-column>
				<el-table-column
				  label="所属底层"
				  width="50"
				  prop="basicName">
				</el-table-column>
				<el-table-column
				  label="发行商"
				  width="50"
				  prop="publishName">
				</el-table-column>
				<el-table-column
				  label="操作"
				  width="600">
				  <template slot-scope="scope">
					<view class="uni-group">
							<el-link type="primary" :href = "scope.row.url" target ="_blank">
								<button class="uni-button" size="mini" type="primary">后台</button>
							</el-link>
							<el-link type="primary" :href = "scope.row.baota" target ="_blank">
								<button class="uni-button" size="mini" type="primary">面板</button>
							</el-link>
							<button class="uni-button" size="mini" type="primary" @click="clearAcc(scope.row.post)" v-if="$hasRole('admin')">清号</button>
                            <button class="uni-button" size="mini" type="warn" @click="pauseSync(scope.row.name)" v-if="$hasRole('admin')">暂停</button>
                            <button class="uni-button" size="mini" type="primary" @click="resumeSync(scope.row.name)" v-if="$hasRole('admin')">恢复</button>
							<button class="uni-button" size="mini" type="primary" @click="editionInit(scope.row.name)" v-if="$hasRole('admin')">初始化</button>
							<button class="uni-button" size="mini" type="primary" @click="changeEdition(scope.row)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="delEdition(scope.row.name)" v-if="$hasRole('admin')">删除</button>
					</view>
				  </template>
				</el-table-column>
			</el-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
            </view>
        </view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
				dialogFormVisible : false,
				formLabelWidth : "70px",
		        percentage: 0,
		        colors: [
		          {color: '#f56c6c', percentage: 100},
		          {color: '#e6a23c', percentage: 80},
		          {color: '#5cb87a', percentage: 60},
		          {color: '#1989fa', percentage: 40},
		          {color: '#6f7ad3', percentage: 20}
		        ],
				search:"",
				form: {
					rate : 0,
					name : "",
					publisher : "",
					des: "",
					post: "",
					url : "",
					basic : ""
				},
				options: [],
				publishs: [],
				serverData : [],
                tableData: [],
                // 每页数据量
                pageSize: 100,
                // 当前页
                pageCurrent: 1,
                // 数据总量
                total: 0,
                loading: false
            }
        },
        onLoad() {
            this.selectedIndexs = []
			this.getEditions(1)
        },
        methods: {
            // 分页触发
            change(e) {
                this.getEditions(e.current)
            },
			//获取版本列表
			getEditions(pageCurrent){
				//未知问题，获取数据失败会阻塞
                this.loading = true
                this.pageCurrent = pageCurrent
				this.request("/getEditions",{},(res) => {
						var list = []
						if(res.data){
							for(var i in res.data){
								res.data[i]["name"] = i
								res.data[i]["time"] = (new Date(res.data[i]["time"])).toLocaleDateString()
								res.data[i]["mem"] = 0
								res.data[i]["cpu"] = 0
								res.data[i]["runTime"] = ""
								res.data[i]["url"] = "http://res.linghuanhuyu.com/admin/gameAdmin/index.html#/pages/login/login?game="+res.data[i]["post"]
								res.data[i]["baota"] = "http://"+res.data[i]["post"]+":8888/tencentcloud"
								res.data[i]["baotaTX"] = res.data[i]["baota"]+"/tencentcloud"
								list.push(res.data[i])
							}
							for(var i = 0;i < list.length;i++){
								for(var j = i+1;j < list.length;j++){
									if(new Date(list[i].time).getTime() < new Date(list[j].time).getTime()){
										var tmp = list[i]
										list[i] = list[j]
										list[j] = tmp
									}
								}
							}
						}
						list.sort(function(a,b){
							return  a.sync > b.sync  ? -1 : 1
						})
						this.serverData = list
						this.total = list.length
						this.tableData = this.serverData.slice((this.pageCurrent-1)*this.pageSize,this.pageCurrent*this.pageSize)
						this.loading = false
						this.updateOS()
				})
			},
			updateOS(){
				for(var i = 0;i < this.tableData.length;i++){
					if(this.tableData[i].sync == 1)
						this.getOSDats(this.tableData[i])
				}
			},
			//获取系统信息
			getOSDats(data){
				if(data.post){
					this.$tmpaxios.myrequest(data.post,"/getOSData",{},(res) => {
						if(res.data && res.data.uptime){
							data["runTime"] = this.SecondToDate(res.data.uptime)
							data["menValue"] = Math.ceil(res.data.freemem/1048576) + "/"+Math.ceil(res.data.totalmem/1048576)
							data["mem"] = Math.ceil((1 - res.data.freemem / res.data.totalmem) * 100)
						}
					})
				}
			},
			//修改版本
			changeEdition(data){
				console.log("changeEdition",this.form)
				this.form = data
				this.dialogFormVisible = true
			},
			//添加版本
			addEdition(){
				console.log("addEdition",this.form.name)
				if(!this.form.name || !this.form.post){
					this.$message.error('版本名称或ip地址错误');
				}else{
					this.dialogFormVisible = false
					var info = {
						rate : this.form.rate,
						tip : 0,
						estimate : 0,
						name : this.form.name,
						publisher : this.form.publisher,
						des : this.form.des,
						post : this.form.post,
						url : this.form.url,
						basic : this.form.basic
					}
					this.request("/addEdition",info,(res) => {
						console.log(res.data)
							if(res.data.flag){
								this.$message({
								  message: '添加成功',
								  type: 'success'
								});
								this.getEditions(this.pageCurrent)
							}else{
								this.$message({
								  message: res.data.data,
								  type: 'error'
								});
							}
					})
				}
			},
			//删除版本
			delEdition(name){
				this.request("/delEdition",{name:name},(res) => {
							this.$message({
							  message: '删除版本',
							  type: 'success'
							});
						this.getEditions(this.pageCurrent)
				})
			},
			//停止更新
			pauseSync(name){
				this.request("/pauseSync",{name:name},(res) => {
							this.$message({
							  message: '停止更新',
							  type: 'success'
							});
						this.getEditions(this.pageCurrent)
				})
			},
			//恢复更新
			resumeSync(name){
				this.request("/resumeSync",{name:name},(res) => {
							this.$message({
							  message: '恢复更新',
							  type: 'success'
							});
						this.getEditions(this.pageCurrent)
				})
			},
			//清理账户
			clearAcc(post){
				console.log(post)
				// this.request("/resumeSync",{name:name},(res) => {
				// 		console.log('data!!!!!!!', res.data);
				// 			this.$message({
				// 			  message: '恢复更新',
				// 			  type: 'success'
				// 			});
				// 		this.getEditions(this.pageCurrent)
				// })
				this.cleanPlayerpost(post)
				// this.cleanSql(post)
			},
			cleanPlayerpost(post){
				this.$tmpaxios.myrequest(post,"/cleanPlayer",{},(res) => {
					console.log('data', res);
					this.$message({
					  message: '清理账户成功',
					  type: 'success'
					});
				})
			},
			cleanSql(post){
				this.$tmpaxios.myrequest(post,"/cleanSql",{},(res) => {
					console.log('data', res);
					this.$message({
					  message: '清理sql成功',
					  type: 'success'
					});
				})
			},
			//初始化
			editionInit(name){
				this.request("/editionInit",{name:name},(res) => {
							this.$message({
							  message: '初始化成功',
							  type: 'success'
							});
				})
			},
            // request请求
            request(path,options,success) {
				this.$axios.post(path,options)//传参
				.then(function(res){
					  success(res)
				})
				.catch(function(err){
					  console.log("请求失败233");
				});
            },
			SecondToDate(msd) {
				var time =msd
				if (null != time && "" != time) {
					if (time > 60 && time < 60 * 60) {
						time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
							parseInt(time / 60.0)) * 60) + "秒";
					}
					else if (time >= 60 * 60 && time < 60 * 60 * 24) {
						time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
							parseInt(time / 3600.0)) * 60) + "分钟" +
							parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
							parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
					} else if (time >= 60 * 60 * 24) {
						time = parseInt(time / 3600.0/24) + "天" +parseInt((parseFloat(time / 3600.0/24)-
							parseInt(time / 3600.0/24))*24) + "小时" + parseInt((parseFloat(time / 3600.0) -
							parseInt(time / 3600.0)) * 60) + "分钟" +
							parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
							parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
					}
					else {
						time = parseInt(time) + "秒";
					}
				}
				return time;
			}
        }
    }
</script>

<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}
	/* #endif */
</style>
